/**
 * 页面通用弹窗效果处理
 * 
 * 此脚本为各页面常见操作添加中心弹窗效果
 * 应该在引入modal-dialog.js之后引入此脚本
 */

document.addEventListener('DOMContentLoaded', function() {
    // 处理通用的按钮点击事件
    setupCommonButtonHandlers();
    
    // 处理特定页面的特殊处理
    setupPageSpecificHandlers();
    
    // 处理所有通知相关元素
    overrideNotifications();
});

/**
 * 为通用按钮设置点击处理
 */
function setupCommonButtonHandlers() {
    // 查看详情按钮
    document.querySelectorAll('.btn-secondary:not([data-modal-handled])').forEach(btn => {
        if (btn.textContent.includes('查看详情') || btn.textContent.includes('详情')) {
            btn.setAttribute('data-modal-handled', 'true');
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 尝试从上下文获取标题
                let title = '详细信息';
                let parentCard = btn.closest('.card');
                if (parentCard) {
                    const cardTitle = parentCard.querySelector('.card-title');
                    if (cardTitle) {
                        title = cardTitle.textContent.trim();
                    }
                }
                
                // 模拟详情内容
                showDetailDialog(title, `
                    <div class="detail-content">
                        <div class="detail-placeholder">
                            <i class="fas fa-info-circle"></i>
                            <p>详细信息展示区域</p>
                            <p class="detail-note">该功能正在完善中，敬请期待</p>
                        </div>
                    </div>
                    <style>
                        .detail-content {
                            min-height: 200px;
                        }
                        .detail-placeholder {
                            height: 200px;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            color: #888;
                        }
                        .detail-placeholder i {
                            font-size: 48px;
                            margin-bottom: 15px;
                            color: var(--primary-light);
                        }
                        .detail-note {
                            font-size: 14px;
                            margin-top: 10px;
                            color: #aaa;
                        }
                    </style>
                `);
            });
        }
    });
    
    // 导出按钮
    document.querySelectorAll('.btn:not([data-modal-handled])').forEach(btn => {
        if (btn.textContent.includes('导出')) {
            btn.setAttribute('data-modal-handled', 'true');
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                
                let exportType = '数据';
                if (btn.textContent.includes('报告')) exportType = '报告';
                if (btn.textContent.includes('图')) exportType = '图表';
                if (btn.textContent.includes('架构')) exportType = '架构图';
                if (btn.textContent.includes('日志')) exportType = '日志';
                if (btn.textContent.includes('模型')) exportType = '模型';
                
                showMessage(`正在准备导出${exportType}...`, 'info');
                
                setTimeout(() => {
                    showMessage(`${exportType}已成功导出到您的下载文件夹`, 'success');
                }, 1500);
            });
        }
    });
    
    // 确认按钮
    document.querySelectorAll('.btn:not([data-modal-handled])').forEach(btn => {
        if (btn.textContent.includes('确认') || btn.textContent.includes('处理')) {
            btn.setAttribute('data-modal-handled', 'true');
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                
                let context = '';
                let parentItem = btn.closest('.alert-item');
                if (parentItem) {
                    const alertTitle = parentItem.querySelector('.alert-title');
                    if (alertTitle) {
                        context = alertTitle.textContent.trim();
                    }
                }
                
                if (context) {
                    showMessage(`已确认"${context}"`, 'success');
                } else {
                    showMessage('操作已确认', 'success');
                }
            });
        }
    });
    
    // 删除按钮
    document.querySelectorAll('.action-btn:not([data-modal-handled])').forEach(btn => {
        if (btn.title === '删除') {
            btn.setAttribute('data-modal-handled', 'true');
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                // 尝试获取要删除的项目名称
                let itemName = '此项目';
                const row = btn.closest('tr');
                if (row) {
                    const nameCell = row.querySelector('td:nth-child(3)') || row.querySelector('td:nth-child(2)');
                    if (nameCell) {
                        itemName = nameCell.textContent.trim();
                    }
                }
                
                showConfirmDialog(
                    '确认删除',
                    `您确定要删除"${itemName}"吗？此操作不可撤销。`,
                    function() {
                        showMessage(`已删除"${itemName}"`, 'success');
                    }
                );
            });
        }
    });
    
    // 编辑按钮
    document.querySelectorAll('.action-btn:not([data-modal-handled])').forEach(btn => {
        if (btn.title === '编辑') {
            btn.setAttribute('data-modal-handled', 'true');
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                // 尝试获取要编辑的项目名称
                let itemName = '信息';
                const row = btn.closest('tr');
                if (row) {
                    const nameCell = row.querySelector('td:nth-child(3)') || row.querySelector('td:nth-child(2)');
                    if (nameCell) {
                        itemName = nameCell.textContent.trim();
                    }
                }
                
                showFormDialog(
                    `编辑${itemName}`,
                    `
                    <div class="form-group">
                        <label>名称</label>
                        <input type="text" name="name" value="${itemName}" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>描述</label>
                        <textarea name="description" class="form-control" rows="3">这是${itemName}的描述信息</textarea>
                    </div>
                    `,
                    function(data) {
                        showMessage(`已更新"${data.name}"的信息`, 'success');
                    }
                );
            });
        }
    });
}

/**
 * 为特定页面设置特殊处理
 */
function setupPageSpecificHandlers() {
    // 获取当前页面路径
    const currentPath = window.location.pathname;
    const pageName = currentPath.split('/').pop();
    
    // 根据页面名称处理特定页面
    switch (pageName) {
        case 'model-performance.html':
            setupModelPerformancePage();
            break;
        case 'model-update.html':
            setupModelUpdatePage();
            break;
        case 'quality-analysis.html':
            setupQualityAnalysisPage();
            break;
        case 'online-analysis.html':
            setupOnlineAnalysisPage();
            break;
        case 'production-monitor.html':
            setupProductionMonitorPage();
            break;
        case 'user-management.html':
            setupUserManagementPage();
            break;
        case 'system-settings.html':
            setupSystemSettingsPage();
            break;
        case 'alert-settings.html':
            setupAlertSettingsPage();
            break;
        case 'data-management.html':
            setupDataManagementPage();
            break;
        case 'history-data.html':
            setupHistoryDataPage();
            break;
    }
}

/**
 * 覆盖默认的通知行为
 */
function overrideNotifications() {
    // 检查是否存在原来的showNotification函数
    if (typeof window.showNotification === 'function') {
        // 保存原始函数
        window._originalShowNotification = window.showNotification;
        
        // 覆盖为新的弹窗函数
        window.showNotification = function(message, type = 'info') {
            showMessage(message, type);
        };
    }
    
    // 检查是否存在原来的createConfirmDialog函数
    if (typeof window.createConfirmDialog === 'function') {
        // 保存原始函数
        window._originalCreateConfirmDialog = window.createConfirmDialog;
        
        // 覆盖为新的弹窗函数
        window.createConfirmDialog = function(title, message, onConfirm, onCancel) {
            showConfirmDialog(title, message, onConfirm, onCancel);
        };
    }
    
    // 检查是否存在原来的showDialog函数
    if (typeof window.showDialog === 'function') {
        // 保存原始函数
        window._originalShowDialog = window.showDialog;
        
        // 覆盖为新的弹窗函数
        window.showDialog = function(title, content) {
            showFormDialog(title, content, function() {
                showMessage('操作已完成', 'success');
            });
        };
    }
}

/**
 * 特定页面处理 - 模型性能页
 */
function setupModelPerformancePage() {
    // 处理图表占位符点击
    document.querySelectorAll('.chart-placeholder').forEach(chart => {
        chart.addEventListener('click', function() {
            let title = '图表详情';
            let parentCard = chart.closest('.card');
            if (parentCard) {
                const cardTitle = parentCard.querySelector('.card-title');
                if (cardTitle) {
                    title = cardTitle.textContent.trim();
                }
            }
            
            showDetailDialog(title, `
                <div class="chart-detail">
                    <div class="chart-large-placeholder">
                        <i class="fas fa-chart-line"></i>
                        <p>详细图表将在这里显示</p>
                    </div>
                    <div class="chart-description">
                        <h4>图表说明</h4>
                        <p>该图表展示了模型在不同条件下的性能表现，横轴表示数据点，纵轴表示相应的指标值。</p>
                        <p>通过分析图表趋势，可以发现模型性能的变化规律，为模型优化提供依据。</p>
                    </div>
                </div>
                <style>
                    .chart-detail {
                        display: flex;
                        flex-direction: column;
                        gap: 20px;
                    }
                    .chart-large-placeholder {
                        height: 300px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        background-color: rgba(0,0,0,0.02);
                        border-radius: 8px;
                    }
                    .chart-large-placeholder i {
                        font-size: 64px;
                        color: #aaa;
                        margin-bottom: 15px;
                    }
                    .chart-description h4 {
                        margin-bottom: 10px;
                        color: var(--primary-dark);
                    }
                    .chart-description p {
                        margin-bottom: 10px;
                        line-height: 1.6;
                    }
                </style>
            `, 'large');
        });
    });
}

/**
 * 特定页面处理 - 模型更新页
 */
function setupModelUpdatePage() {
    // 处理创建新版本按钮
    const createVersionBtn = document.getElementById('create-version');
    if (createVersionBtn) {
        createVersionBtn.addEventListener('click', function(e) {
            e.preventDefault();
            
            showFormDialog('创建新模型版本', `
                <div class="wizard-content">
                    <div class="step-indicator">
                        <div class="step active">1. 选择基础版本</div>
                        <div class="step">2. 配置参数</div>
                        <div class="step">3. 选择数据集</div>
                        <div class="step">4. 训练模型</div>
                        <div class="step">5. 评估部署</div>
                    </div>
                    
                    <div class="form-group">
                        <label>版本名称</label>
                        <input type="text" name="version_name" value="v3.3.0" class="form-control">
                    </div>
                    
                    <div class="form-group">
                        <label>基础版本</label>
                        <select name="base_version" class="form-control">
                            <option value="v3.2.1">v3.2.1 (当前版本)</option>
                            <option value="v3.1.5">v3.1.5</option>
                            <option value="v3.0.0">v3.0.0</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label>版本描述</label>
                        <textarea name="description" class="form-control" rows="3">改进的预测模型，优化碳含量预测精度，增加异常工况检测能力。</textarea>
                    </div>
                </div>
                <style>
                    .wizard-content {
                        display: flex;
                        flex-direction: column;
                        gap: 20px;
                    }
                    .step-indicator {
                        display: flex;
                        margin-bottom: 15px;
                        overflow-x: auto;
                        padding-bottom: 5px;
                    }
                    .step {
                        padding: 8px 15px;
                        border-radius: 20px;
                        background-color: #f1f1f1;
                        font-size: 13px;
                        white-space: nowrap;
                        margin-right: 10px;
                    }
                    .step.active {
                        background-color: var(--primary);
                        color: white;
                    }
                </style>
            `, function(data) {
                showMessage(`已创建新版本 ${data.version_name}，请继续配置参数`, 'success');
            });
        });
    }
}

/**
 * 特定页面处理 - 质量分析页
 */
function setupQualityAnalysisPage() {
    // 处理质量评分卡点击
    document.querySelectorAll('.quality-score-card').forEach(card => {
        card.addEventListener('click', function(e) {
            // 如果点击的是按钮，不执行
            if (e.target.closest('.btn')) return;
            
            const title = this.querySelector('.score-title').textContent;
            const score = this.querySelector('.score-value').textContent;
            
            showDetailDialog(`${title}详情`, `
                <div class="score-detail">
                    <div class="score-header">
                        <div class="score-info">
                            <div class="score-title">${title}</div>
                            <div class="score-badge">${this.querySelector('.score-badge').textContent}</div>
                        </div>
                        <div class="score-value-large">${score}</div>
                    </div>
                    
                    <div class="chart-placeholder">
                        <i class="fas fa-chart-line"></i>
                        <p>${title}趋势图</p>
                    </div>
                    
                    <div class="score-analysis">
                        <h4>评分分析</h4>
                        <p>${title}当前评分为${score}分，相比上月${this.querySelector('.score-comparison').textContent.includes('提升') ? '有所提升' : '有所下降'}。主要影响因素包括生产工艺稳定性、原材料质量和设备状态。</p>
                        
                        <h4>改进建议</h4>
                        <ul>
                            <li>优化生产参数配置，提高工艺稳定性</li>
                            <li>加强原材料质量控制，减少波动</li>
                            <li>定期维护关键设备，确保性能稳定</li>
                        </ul>
                    </div>
                </div>
                <style>
                    .score-detail {
                        display: flex;
                        flex-direction: column;
                        gap: 20px;
                    }
                    .score-header {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 15px;
                        background-color: rgba(0,0,0,0.02);
                        border-radius: 8px;
                    }
                    .score-badge {
                        padding: 4px 8px;
                        border-radius: 5px;
                        background-color: var(--primary);
                        color: white;
                        font-weight: 700;
                        font-size: 14px;
                        margin-top: 5px;
                    }
                    .score-value-large {
                        font-size: 36px;
                        font-weight: 700;
                        color: var(--primary-dark);
                    }
                    .chart-placeholder {
                        height: 250px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        background-color: rgba(0,0,0,0.02);
                        border-radius: 8px;
                    }
                    .chart-placeholder i {
                        font-size: 48px;
                        color: #aaa;
                        margin-bottom: 15px;
                    }
                    .score-analysis h4 {
                        margin: 15px 0 10px;
                        color: var(--primary-dark);
                    }
                    .score-analysis p, .score-analysis ul {
                        margin-bottom: 15px;
                        line-height: 1.6;
                    }
                    .score-analysis li {
                        margin-bottom: 8px;
                    }
                </style>
            `, 'medium');
        });
    });
}

/**
 * 特定页面处理 - 在线分析页
 */
function setupOnlineAnalysisPage() {
    // 在线分析页特有处理可以在这里添加
}

/**
 * 特定页面处理 - 生产监控页
 */
function setupProductionMonitorPage() {
    // 处理警报项点击
    document.querySelectorAll('.alert-item').forEach(item => {
        item.addEventListener('click', function(e) {
            // 如果点击的是按钮，不执行
            if (e.target.closest('.btn')) return;
            
            const title = this.querySelector('.alert-title').textContent;
            const description = this.querySelector('.alert-description').textContent;
            
            showDetailDialog(`警报详情: ${title}`, `
                <div class="alert-detail">
                    <div class="alert-header ${this.classList.contains('error') ? 'error' : this.classList.contains('warning') ? 'warning' : 'info'}">
                        <div class="alert-icon">
                            <i class="${this.querySelector('.alert-icon i').className}"></i>
                        </div>
                        <div class="alert-info">
                            <div class="alert-title">${title}</div>
                            <div class="alert-meta">
                                ${this.querySelector('.alert-meta').innerHTML}
                            </div>
                        </div>
                    </div>
                    
                    <div class="alert-content">
                        <div class="alert-description">
                            <h4>警报说明</h4>
                            <p>${description}</p>
                        </div>
                        
                        <div class="alert-data">
                            <h4>相关数据</h4>
                            <div class="data-chart-placeholder">
                                <i class="fas fa-chart-line"></i>
                                <p>警报相关数据趋势图</p>
                            </div>
                        </div>
                        
                        <div class="alert-solution">
                            <h4>建议解决方案</h4>
                            <ul>
                                <li>检查相关设备连接和状态</li>
                                <li>调整运行参数到推荐范围内</li>
                                <li>如问题持续，联系技术支持</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <style>
                    .alert-detail {
                        display: flex;
                        flex-direction: column;
                        gap: 20px;
                    }
                    .alert-header {
                        display: flex;
                        align-items: center;
                        padding: 15px;
                        border-radius: 8px;
                    }
                    .alert-header.error {
                        background-color: rgba(244, 67, 54, 0.1);
                    }
                    .alert-header.warning {
                        background-color: rgba(255, 152, 0, 0.1);
                    }
                    .alert-header.info {
                        background-color: rgba(33, 150, 243, 0.1);
                    }
                    .alert-icon {
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-right: 15px;
                    }
                    .alert-header.error .alert-icon i {
                        color: var(--danger-color, #F44336);
                    }
                    .alert-header.warning .alert-icon i {
                        color: var(--warning-color, #FF9800);
                    }
                    .alert-header.info .alert-icon i {
                        color: var(--info-color, #2196F3);
                    }
                    .alert-content h4 {
                        margin: 15px 0 10px;
                        color: var(--primary-dark);
                    }
                    .data-chart-placeholder {
                        height: 200px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        background-color: rgba(0,0,0,0.02);
                        border-radius: 8px;
                        margin: 15px 0;
                    }
                    .data-chart-placeholder i {
                        font-size: 48px;
                        color: #aaa;
                        margin-bottom: 15px;
                    }
                    .alert-content p, .alert-content ul {
                        margin-bottom: 15px;
                        line-height: 1.6;
                    }
                    .alert-content li {
                        margin-bottom: 8px;
                    }
                </style>
            `, 'large');
        });
    });
}

/**
 * 特定页面处理 - 用户管理页
 */
function setupUserManagementPage() {
    // 用户管理页特有处理可以在这里添加
}

/**
 * 特定页面处理 - 系统设置页
 */
function setupSystemSettingsPage() {
    // 系统设置页特有处理可以在这里添加
}

/**
 * 特定页面处理 - 警报设置页
 */
function setupAlertSettingsPage() {
    // 警报设置页特有处理可以在这里添加
}

/**
 * 特定页面处理 - 数据管理页
 */
function setupDataManagementPage() {
    // 数据管理页特有处理可以在这里添加
}

/**
 * 特定页面处理 - 历史数据页
 */
function setupHistoryDataPage() {
    // 历史数据页特有处理可以在这里添加
} 